<template>
  <el-form :model="form.personnel" label-width="120px">
    <el-form-item label="姓名">
      <el-input size="small" style="max-width: 300px" v-model="form.personnel.name" />
    </el-form-item>

    <el-form-item label="性别">
      <el-select v-model="form.personnel.sex" placeholder="选择你的性别">
        <el-option label="男" value="男" />
        <el-option label="女" value="女" />
      </el-select>
    </el-form-item>

    <el-form-item label="生日">
      <el-date-picker value-format="YYYY-MM-DD" v-model="form.personnel.birthday" />
    </el-form-item>

    <el-form-item label="身份证号">
      <el-input size="small" style="max-width: 300px" v-model="form.personnel.identity_number" />
    </el-form-item>

    <el-form-item label="入职时间">
      <el-date-picker value-format="YYYY-MM-DD" placeholder="入职时间" v-model="form.personnel.entry_date" />
    </el-form-item>

    <el-form-item label="上岗时间">
      <el-date-picker value-format="YYYY-MM-DD" placeholder="上岗时间" v-model="form.personnel.work_date" />
    </el-form-item>

    <el-form-item label="用工形式">
      <el-radio-group v-model="form.personnel.kind">
        <el-radio label="正式员工" />
        <el-radio label="临时员工" />
      </el-radio-group>
    </el-form-item>

    <el-form-item label="人员来源">
      <el-radio-group v-model="form.personnel.source">
        <el-radio label="校园招聘" />
        <el-radio label="社会招聘" />
        <el-radio label="其他" />
      </el-radio-group>
    </el-form-item>

    <el-form-item label="入职部门">
      <el-select
        v-model="form.personnel.department_id"
        class="m-2"
        placeholder="Select"
        size="large"
        @change="OnDptChange"
      >
        <el-option v-for="item in form.departmentForms" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
    </el-form-item>

    <el-form-item label="入职岗位">
      <el-select v-model="form.personnel.position_id" class="m-2" placeholder="Select" size="large">
        <el-option v-for="item in form.position[dptId]" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">登记</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { ElMessageBox } from "element-plus"
import { reactive, ref } from "vue"
import { InsertPersonnel } from "@/models/personnel"
import { getDataset, postData } from "@/api/crud"
import { Department } from "@/models/department"
import { Position } from "@/models/position"
import { useRouter } from "vue-router"

getDataset<Department>("departments").then((res: any) => {
  form.departmentForms = res.data
  for (let i = 0, l = form.departmentForms.length; i < l; ++i) {
    getDataset<Position>(`/department/positions/${form.departmentForms[i].id}`).then((re) => {
      form.position[form.departmentForms[i].id] = re.data
    })
  }
})

const dptId = ref<number>(1000)
const router = useRouter()
const form = reactive({
  departmentForms: ref<Department[]>([]),
  position: ref<Position[][]>([]),
  personnel: {} as InsertPersonnel
})

const onSubmit = () => {
  ElMessageBox.confirm("确认增加入职员工").then(() => {
    postData("/personnel", form.personnel)
    router.push({ path: "/" })
  })
}

function OnDptChange(val: number) {
  dptId.value = val
}
</script>
